<template>
  <div class="black-org">
    <vue2-org-tree
      :data="treeData"
      :horizontal="false"
      :collapsable="false"
      :render-content="renderNode"
      label-class-name="black-label"
    />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'BlackOrg',
  data() {
    return {
      cascader_options: [],
      treeData: [],
      valueList: [],
      /* treeData1: {
        label: '汉中公安关爱+在管人员总数',
        children: [
          {
            label: '预防未成年人违法犯罪（21人）',
            children: [
              { label: '违法犯罪未成年人' },
              { label: '实质辍学未成年人' },
              { label: '辍学后务工未成年人' },
              { label: '不良行为未成年人' },
              { label: '严重不良行为未成年人' },
            ],
          },
          {
            label: '预防重案命案违法犯罪（39人）',
            children: [
              { label: '涉警涉重' },
              { label: '涉法涉诉' },
              { label: '涉访涉稳' },
              { label: '涉欺涉辱' },
              {
                label: '涉婚涉恋',
                children: [
                  { label: '感情不和家庭' },
                  { label: '再婚重组家庭' },
                  { label: '上门女婿家庭' },
                  { label: '夫妻一方在外务工...' },
                  { label: '婆媳关系紧张家庭' },
                  { label: '婚嫁彩礼利益冲突媳关系' },
                  { label: '单独未婚有恋情纠纷' },
                  { label: '婚内弱势有家暴' },
                  { label: '违背伦理道德不正当关系' },
                  { label: '其他' },
                ],
              },
            ],
          },
          {
            label: '涉访涉稳（1人）',
            children: [{ label: '涉公涉警访' }, { label: '缠访闹访' }, { label: '非正常访' }],
          },
          {
            label: '个人极端及群体性事件（4人）',
            children: [
              { label: '扬言报复社会人员' },
              { label: '极端暴力倾向人员' },
              { label: '挑头煽动群体性事件人员' },
              { label: '重大纠纷债务人员' },
              { label: '自杀倾向或自杀未遂人员' },
              { label: '网上发布极端言论人员' },
              { label: '网购行为异常人员' },
            ],
          },
          {
            label: '反诈防诈（22人）',
            children: [
              { label: '防范意识较弱老年人' },
              { label: '自我保护意识较弱学生' },
              { label: '资金需求急切人员' },
              { label: '情感需求强烈人员' },
              { label: '个体商户及公司财务人员' },
              { label: '有涉诈前科黑灰产人员' },
            ],
          },
          {
            label: '其他',
          },
        ],
      }, */
    }
  },
  mounted() {
    // this.treeData = this.getRootNode()
    this.getFiveList()
  },
  methods: {
    /*  renderNode(h, data) {
      console.log(data, 'datadatafh')
      const isLevel1 = data._parent && data._parent.level === 0

      return h(
        'div',
        {
          class: {
            'node-box': true, // 人人都有
            'level1-node': isLevel1, // 仅一级子节点额外拥有
          },
        },
        data.label
      )
    }, */
    // * 处理行业树 将children:[] 项过滤
    process_cascader_data(data) {
      if (!data || !Array.isArray(data)) {
        return null
      }
      return data.map((item) => {
        const processedItem = {
          parentId: item.t.parentId,
          label: item.t.dictName,
          value: item.t.dictCode,
          children: item.children.length > 0 ? item.children : null, // 将 children 设置为 null
        }

        if (item.children && item.children.length > 0) {
          processedItem.children = this.process_cascader_data(item.children) // 递归处理子节点
        }

        return processedItem
      })
    },
    async getFiveList() {
      let { result } = await getAction('/sysMultiLevelDict/selectSysMultiLevelDictList', { dictCode: 'PREVENT_CRIME' })
      console.log(result, 'result')
      let final_result = this.process_cascader_data(result[0].children)
      console.log(final_result, 'final_result')

      this.cascader_options = final_result
      this.treeData = this.buildTreeData(final_result)
      console.log(this.treeData, 'this.treeData')
    },
    isFirstLevelCategory(node) {
      // 如果这个节点直接是一级分类的子节点，则是真正的一级分类
      return this.treeData.children.some((firstLevelNode) => firstLevelNode === node)
    },
    getRootNode() {
      return this.treeData
    },
    isRootNode(node) {
      return node === this.treeData
    },
    buildTreeData(src, countMap = {}) {
      const root = {
        label: '汉中公安关爱+在管人员总数',
        children: [],
      }

      src.forEach((item) => {
        const code = item.value // 一级编码 如 PJD
        const count = countMap[code] ?? 0 // 人数
        const node = {
          // label: `${item.label}（${count}人）`,
          label: item.label,
          value: code,
          children: [],
        }
        ;(item.children || []).forEach((sub) => {
          // 二级
          const subNode = { label: sub.label, value: sub.value, parentId: node.value }
          if (sub.children && sub.children.length) {
            // 三级（ PMFC-5 涉婚涉恋）
            subNode.children = sub.children.map((c) => ({
              label: c.label,
              value: c.value,
              parentId: node.value + ',' + sub.value,
            }))
          }
          node.children.push(subNode)
        })

        root.children.push(node)
      })

      return root
    },
    handleNodeClick(data) {
      let youthValue = []
      let value = ''

      console.log(data, 'datanode')
      const isChildren = data.children && data.children.length
      if (data.children && data.children.length) {
        youthValue = data.children.map((item) => {
          return item.value
        })
      } else {
        youthValue = [data.value]
      }
      // 跳转到详情页，携带节点参数
      this.$router.push({
        path: '/careFamily/teenagerProfile/index',

        query: {
          // label: data.label,
          // isChildren,

          youthIds: JSON.stringify(youthValue),
          value: isChildren ? data.value : data.parentId,
        },
      })
    },
    renderNode(h, data) {
      console.log(data, 'datadata')
      const firstLevelCategories = this.treeData.children.map((item) => item.label)
      console.log(firstLevelCategories)
      const isRoot = this.isRootNode(data)

      //const isLevel1 = firstLevelCategories.includes(data.label)
      const isLevel1 = this.isFirstLevelCategory(data)
      const nodeElement = h(
        'div',
        {
          class: {
            'node-box': true,
            'level1-node': isLevel1,
          },
        },
        data.label
      )
      // return h(
      //   'div',
      //   {
      //     class: {
      //       // 'org-tree-node-label-inner': true,
      //       'org-node-warpper': true,
      //       'has-level1-node': isLevel1, // 给上级 div 添加标识类名
      //     },
      //   },
      //   [nodeElement] // 将原来的节点元素作为子元素
      // )

      return h(
        'div',
        {
          class: {
            'node-box': true,
            'level1-node': isLevel1,
          },
          attrs: {
            'data-level1': isLevel1 ? 'true' : undefined,
            'data-root': isRoot ? 'true' : undefined,
          },

          on: {
            click: () => this.handleNodeClick(data),
          },
        },
        data.label
      )
    },
  },
}
</script>

<style lang="less" scoped>
/* 整个画布背景 */
.black-org {
  // background: #06409a;

  background-color: #06409a;
  width: 96%;
  margin: 20px auto;

  overflow: auto;
  min-height: 94%;

  /deep/ .org-tree-container {
    background-color: transparent !important;
    width: 96%;
    margin: 5px auto;
    overflow-x: auto;
    .black-label {
      width: 253px;
      height: 48px;
      background-color: #1970f6;
      border-radius: 2px;
      color: #fff;
    }
  }
  /*  /deep/ .org-tree-node-label {
    width: 253px;
    height: 48px;
    background: #1970f6;
    color: #fff;

    font-size: 16px;
    border-radius: 8px;
  } */
  /deep/ .org-tree-node-label-inner:has(.node-box[data-level1='true']) {
    background: #1970f6;
    font-size: 14px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    width: 253px !important;
    height: 48px !important;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: horizontal-tb !important; /* 从上到下 */
    text-orientation: mixed !important;
  }
  /deep/ .org-tree-node-label-inner:has(.node-box[data-root='true']) {
    background: #1970f6;
    font-size: 24px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    width: 368px !important;
    height: 64px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // writing-mode: horizontal-tb !important; /* 从上到下 */
    // text-orientation: mixed !important;
  }

  /deep/ .org-tree-node-children {
    .org-tree-node {
      .org-tree-node-label {
        .org-tree-node-label-inner {
          width: 40px;
          height: 250px;
          background: #1970f6;
          font-size: 14px;
          border-radius: 8px;
          color: #fff;
          text-align: center;
          display: flex;
          align-items: center; /* 垂直居中 */
          justify-content: center;
          writing-mode: vertical-lr; /* 从上到下 */
          text-orientation: upright; /* 强制数字、字母也竖排 */
          .node-box {
          }
        }
      }
    }
  }
}
</style>
